<!--
 * @Descripttion: 
 * @version: @ 1.0.0
 * @Author: 朱江洲
 * @Date: 2022-04-24 14:28:31
 * @LastEditors: 朱江洲
 * @LastEditTime: 2022-05-07 09:01:37
-->
<template>
  <div class="app-container">
    <div class="header">
      <div class="bread">
        <span style="margin-left: 10px">草稿管理</span>
      </div>
      <div>
        <el-button type="primary" size="default" @click="newOpt">
          <span>新建</span>
        </el-button>
      </div>
    </div>
    <div class="content">
      <el-table :data="data" :height="tableHight">
        <el-table-column label="模块名称" prop="module">
          <template slot-scope="scope">
            <span>
              {{ scope.row.module == 3 ? "合同" : "-" }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="是否开启">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.enable"
              @change="handleStatusChange(scope.row)"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <span
              style="margin-right: 10px; color: #1267fa; cursor: pointer"
              @click="edit(scope.row)"
              v-if="scope.row.isDelete !== 1"
              >编辑</span
            >
            <span
              style="margin-right: 10px; color: #1267fa; cursor: pointer"
              @click="del(scope.row)"
              v-if="scope.row.isDelete !== 1"
              >删除</span
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <!-- <el-pagination
        prev-text="上一页"
        next-text="下一页"
        background
        :page-size="pageSize"
        :page-sizes="[10, 20, 30, 40, 50, 100]"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        layout=" ->,total, sizes, prev, pager, next, jumper "
        :total="total"
      >
      </el-pagination> -->
    </div>
    <div v-if="statusShowEject">
      <el-dialog
        :title="title"
        :visible.sync="statusShow"
        width="30%"
        @close="draftClose"
      >
        <el-form
          :model="draftForm"
          ref="draftForm"
          :rules="statusRules"
          :inline="false"
          size="normal"
        >
          <el-form-item
            label="适用模块"
            prop="module"
            v-if="draftForm.id == null"
          >
            <el-select
              v-model="draftForm.module"
              value-key=""
              placeholder="请选择适用模块"
            >
              <el-option
                v-for="item in endData"
                :key="item.module"
                :label="item.name"
                :value="item.module"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="管理人员" prop="userId">
            <el-select v-model="draftForm.userId" placeholder="请选择管理人员">
              <el-option
                v-for="item in chargeList"
                :key="item.userId"
                :label="item.nickName"
                :value="item.userId"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="输入时间" prop="expire">
            <el-input
              v-model="draftForm.expire"
              onkeyup="value=value.replace(/[^\d]/g,0)"
              style="width: 100px"
            ></el-input>
            天(该时间内，允许编辑)
          </el-form-item>
        </el-form>

        <span slot="footer">
          <el-button @click="statusShow = false">取消</el-button>
          <el-button type="primary" @click="onSubmit">保存</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import draggable from "vuedraggable";
import {
  adaptDraftList,
  draftList,
  addDraftModule,
  editDraftModule,
  deleteModule,
  enable,
} from "@/api/sys";
import { distriBution } from "@/api/registration"; //获取负责人接口
export default {
  components: {
    draggable,
  },
  data() {
    return {
      tableHight: window.innerHeight - 330,
      title: "新建",
      pageSize: 10,
      pageNum: 1,
      total: 0,
      submit: true,
      data: [],
      chargeList: [],
      stageSetData: [
        {
          stageValue: "",
          rate: "",
        },
      ],
      statusId: "",
      endData: [],
      statusShow: false,
      statusShowEject: false,
      draftForm: {
        id: null,
        module: "",
        userId: "",
        expire: "",
      },
      statusRules: {
        module: [{ required: true, message: "请选择模块", trigger: "change" }],
        userId: [
          { required: true, message: "请选择负责人", trigger: "change" },
        ],
        expire: [{ required: true, message: "请填写天数", trigger: "blur" }],
      },
    };
  },
  watch: {
    numberRule: {
      deep: true,
      handler(val) {
        this.rulesStr = "";
        val.forEach((item) => {
          if (item.type == 1) {
            this.rulesStr += item.start + "-";
          } else if (item.type == 2) {
            this.rulesStr += item.fixedChar + "-";
          } else if (item.type == 3) {
            this.rulesStr += item.pattern + "-";
          }
        });
        this.rulesStr = this.rulesStr.substr(0, this.rulesStr.length - 1);
        console.log(this.rulesStr);
      },
    },
  },
  created() {
    this.getList();
  },
  mounted() {
    window.onresize = () => {
      return (() => {
        this.tableHight = window.innerHeight - 330;
      })();
    };
  },
  activated() {
    this.tableHight = window.innerHeight - 330;
  },
  methods: {
    draftClose() {
      this.statusShowEject = false;
      this.title = "新建";
      this.draftForm = {
        id: null,
        module: "",
        userId: "",
        expire: "",
      };
    },
    // 获取负责人
    getDistri() {
      distriBution().then((res) => {
        this.chargeList = res.data;
      });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.pageNum = 1;
      this.getList();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getList();
    },

    // 新增编号管理
    onSubmit() {
      this.$refs.draftForm.validate((valid) => {
        if (!valid) return;
        console.log(this.draftForm.id);
        if (this.draftForm.id == null) {
          addDraftModule(this.draftForm).then((res) => {
            this.$message.success(res.msg);
            this.statusShow = false;
            this.getList();
          });
        } else {
          editDraftModule(this.draftForm).then((res) => {
            this.$message.success(res.msg);
            this.statusShow = false;
            this.getList();
          });
        }
      });
    },
    // 编辑
    edit(row) {
      this.title = "编辑";
      this.draftForm = row;
      this.getModuleList();
      this.getDistri();
      this.statusShowEject = true;
      this.$nextTick(function () {
        this.statusShow = true;
      });
    },
    // 删除
    async del(row) {
      const confirmResult = await this.$confirm(
        "此操作将永久删除该编号管理, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);
      /*如果用户确认打印confirm,如果用户取消显示cancel*/
      if (confirmResult !== "confirm") {
        return this.$message.info("已取消删除!");
      } else {
        deleteModule({
          id: row.id,
        }).then((res) => {
          this.$message.success(res.msg);
          this.getList();
        });
      }
      // console.log('确认了删除')
    },
    // 切换状态
    async handleStatusChange(row) {
      let text = row.enable === true ? "开启" : "停用";
      console.log(row.enable);
      const confirmResult = await this.$confirm(
        "确认要" + text + "该模块吗？",
        "警告",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch(function () {
        row.enable = row.status === true ? false : true;
      });
      /*如果用户确认打印confirm,如果用户取消显示cancel*/
      if (confirmResult !== "confirm") {
        row.enable = row.status === true ? false : true;
        // return this.$message.info("已取消删除!");
      } else {
        enable({
          id: row.id,
          enable: row.enable,
        }).then((res) => {
          this.$message.success(res.msg);
          this.getList();
        });
      }
    },
    // 新增草稿管理
    newOpt() {
      this.getModuleList();
      this.getDistri();
      this.statusShowEject = true;
      this.$nextTick(function () {
        this.statusShow = true;
      });
    },
    // 获取适应模块列表
    getModuleList() {
      adaptDraftList().then((res) => {
        this.endData = res.data;
      });
    },
    //   获取列表
    getList() {
      draftList({
        pageSize: this.pageSize,
        pageNum: this.pageNum,
      }).then((res) => {
        this.data = res.data;
      });
    },
  },
};
</script>

<style lang="less" scoped>
.header {
  width: 100%;
  height: 74px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ececec;
  .bread {
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #2b2b2b;
  }
}
.stageSet {
  font-size: 18px;
  color: #2b2b2b;
  font-weight: 700;
}
.table {
  height: 500px;
  overflow: auto;
  .table-header {
    margin-top: 10px;
    display: flex;
    width: 100%;
    justify-content: space-around;
    border: 1px solid #ececec;
    height: 40px;
    line-height: 40px;
    .table-header-title {
      text-align: center;
      width: 200px;
    }
  }
  .table-content {
    .table-content-main {
      display: flex;
      justify-content: space-around;
      height: 50px;
      align-items: center;
      border: 1px solid #ececec;
      border-top: none;
      .table-content-main-title {
        text-align: center;
        width: 240px;
      }
      .lastIpt {
        display: flex;
        align-items: center;
        i {
          margin-left: 10px;
        }
      }
    }
  }
}
.el-pagination {
  margin-top: 24px;
  /deep/ .el-pagination__total {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    margin-right: 25px;
  }
  /deep/ .btn-prev {
    width: 80px;
    height: 40px;
    text-align: center;
  }
  /deep/ .btn-next {
    width: 80px;
    height: 40px;
    text-align: center;
  }
  /deep/ .number {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  /deep/ .el-input__inner {
    // width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  /deep/ .more {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  /deep/ .el-pagination__jump {
    .el-input__inner {
      width: 40px;
      height: 40px;
    }
  }
}
.numRule {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .numRule-left {
    display: flex;
  }
}
.numRule:nth-child(n + 2) {
  margin-top: 20px;
}
.dragRules {
  height: 600px;
  overflow-y: auto;
  border: none;
  border-bottom: 1px solid #ececec;
}
.Examples {
  margin-bottom: 10px;
}
</style>